<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test"></div>
    <!-- 准备好一个容器-->
    
    <!--引入react核心库-->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!--引入react.dom 用于支持react操作dom-->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!--引入bable 用于将jsx转换为js-->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">
    //创建组件
    class Demo extends React.Component{
        showData = () =>{
        const {input1}=this.refs;
        alert(input1.value);
        }
        showData2 =()=>{
         const {input2}=this.refs;
         alert(input2.value);
        }
        render(){
            return(
                <div>
                <input ref="input1" type="text" palceholder="点击按钮提示数据" />
                <button onClick={this.showData}>点击我提升左侧的数据</button>
                <input ref="input2" onBlur={this.showData2} type="text" palceholder="失去焦点提示数据"/>
                </div>
            )
        }
    }
    //渲染组件
    ReactDOM.render(<Demo/>,document.getElementById('test'));
    </script>
</body>
</html>